<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<script type="text/javascript">
	//获取JSON信息
	function loadInfo() {
		var xmlHttp;
		var shengId = document.getElementById("sheng").value;//获取用户输入的用户名
		shi.options.length = 0;//删除原先的内容
		if(shengId==-1){
			return;
		}
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				//alert(xmlHttp.responseText);
				var dataObj = eval("("+xmlHttp.responseText+")");
				//option列表不需要用document来获取市列表DOM位置，直接使用<select中的id
				for (var i = 0; i < dataObj.citiesName.length; i++) {
					var o = dataObj.citiesName[i];
					shi.options.add(new Option(o.name, o.id));
				}
			}
		}
		//
		xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);//使用get方式，异步请求getAjaxInfo
		xmlHttp.send();
	}
</script>
</head>
<body>
省
<select id="sheng" onchange="loadInfo()">
	<option value="-1"></option>
	<option value="0">北京</option>
	<option value="1">江苏省</option>
	<option value="2">辽宁省</option>
	<option value="3">江西省</option>
	<option value="4">福建省</option>
	<option value="5">广东省</option>
	
</select>
&nbsp;&nbsp;
市
<select id="shi">
<!-- 此处由JS动态添加 -->
</select>

</body>
</html>